<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Example 3 (HTTP) - A pre-roll and show stream with an overlay ad</title>
<script type="text/javascript" src="../dist/jquery-1.3.1.js"></script>
<script type="text/javascript" src="../dist/flowplayer-3.1.4.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/global.css" />
</head>
<body>

<h2>Example 3 (HTTP) - A pre-roll and show stream with an overlay ad</h2>
<p class="example">
A 30 second pre-roll ad plays followed by the show stream. 5 seconds into the show stream an
overlay appears for 15 seconds - click on the overlay to start up a video ad. Once the video
ad has played, the show stream resumes at the point at which the overlay was clicked.
</p>
<a class="example"></a>

<script type="text/javascript">
flowplayer("a.example", "../dist/flowplayer-3.1.5.swf", {
    plugins: {
        controls: {
            autoHide: "always"
        },

        openAdStreamer: {
            url: '../dist/OpenAdStreamer.swf',
//            "url": "/fp-http/OpenAdStreamer.swf",

            "shows": {
              "streams": [ { "file":"http://streaming.openvideoads.org/shows/the-black-hole.mp4", "duration":"00:00:30" } ]
            },

            "overlays": {
          "regions": [
              {
                  "id": "bottom",
                  "verticalAlign": "bottom",
                  "horizontalAlign": "center",
                  "backgroundColor": "#000000",
                  "padding": "-10 -10 -10 -10",
                  "width": 450,
                  "height": 50
              }
          ]
        },

            "ads": {
              "servers": [
                   {
                      "type": "OpenX",
                      "apiAddress": "http://openx.openvideoads.org/openx/www/delivery/fc.php",
                   }
              ],
              "schedule": [
                  {
                    "zone": "5",
                      "position": "pre-roll"
                  },
                  {
                      "zone": "33",
                      "position": "bottom",
                      "width": 450,
                      "height": 50,
                      "startTime": "00:00:05",
                      "duration": "15"
                  }
              ],
            },

            "debug": {
              "levels": "fatal",
              "debugger": "firebug"
            }
        }
    }
});
</script>
<p>
The configuration for this example is:
</p>
<div class="codebox">
<pre>
<code class="javascript">
flowplayer("a.example", "../dist/flowplayer-3.1.5.swf", {
    plugins: {
        controls: {
            autoHide: "always"
        },

        openAdStreamer: {
            url: '../dist/OpenAdStreamer.swf',

            "shows": {
                 "streams": [
                      {
                          "file":"http://streaming.openvideoads.org/shows/the-black-hole.mp4",
                          "duration":"00:00:30"
                      }
                 ]
            },

            "overlays": {
                 "regions": [
                      {
                           "id": "bottom",
                           "verticalAlign": "bottom",
                           "horizontalAlign": "center",
                           "backgroundColor": "#000000",
                           "width": 450,
                           "height": 50
                      }
                 ]
            },

            "ads": {
                 "servers": [
                     {
                           "type": "OpenX",
                           "apiAddress": "http://openx.openvideoads.org/openx/www/delivery/fc.php",
                     }
                 ],
                 "schedule": [
                      {
                           "zone": "5",
                           "position": "pre-roll"
                      },
                      {
                           "zone": "33",
                           "position": "bottom",
                           "width": 450,
                           "height": 50,
                           "startTime": "00:00:05",
                           "duration": "15"
                      }
                  ],
              },

              "debug": {
                  "levels": "fatal",
                  "debugger": "firebug"
              }
         }
    }
});
</code>
</pre>
</div>
<script type="text/javascript" src="js/tracking.js">
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-10158120-3");
if(TRACKING_TURNED_ON) {
  pageTracker._trackPageview();
}
} catch(err) {}
</script>
</body>
</html>